<template>
<!--  <Image/>-->
  <el-container>

    <el-aside width="20%">
<!--      <el-row style="margin-top: 20px;">-->
<!--        <el-col :span="24">-->
<!--          <el-card shadow="hover">-->
<!--            <template #header>-->
<!--              <div style="display: flex;justify-content: center;">-->
<!--                <el-image-->
<!--                    src="https://wx2.sinaimg.cn/mw690/006GKMdTly1g57hkz38w0j318g18gq74.jpg"-->
<!--                    :fit="'fill'"-->
<!--                />-->
<!--              </div>-->
<!--            </template>-->
<!--            <span>UserName</span>-->
<!--          </el-card>-->
<!--        </el-col>-->
<!--      </el-row>-->
    </el-aside>

    <el-main>

      <el-row v-if="isEmpty">
        <el-col :span="24">
          <el-empty description="暂无文章" :image-size="300"/>
        </el-col>
      </el-row>

<!--    在这里v-for既可以放在<el-row>,也可以放在<el-col>标签里    -->
        <el-row v-for="(article,index) in list" style="margin-bottom: 10px;">
          <el-col :span="24">
            <el-card shadow="hover">
              <template #header>
                <div class="card-header">
                  <span style="align-content: center;font-size: 30px;">{{article.title}}</span>
                </div>
              </template>
              <div>
                <!--              卡片左上角标签-->
                <div class="ribbon">
                  <span v-if="article.category === 1">技术分享</span>
                  <span v-else-if="article.category === 2">学习笔记</span>
                  <span v-else-if="article.category === 3">随心所写</span>
                  <span v-else-if="article.category === 4">剑指Offer</span>
                  <span v-else>未知分类</span>
                </div>
                <div class="content">
                  <div class="content-info">
                  <span style="display:flex;align-items: center;">
                    <img src="/src/assets/images/Calendar-icon.png" style="width: 16px;height: 16px;">
                    <span>{{formatDate(article.createtime)}}</span>
                  </span>
                    <span style="display:flex;align-items: center;">
                    <img src="/src/assets/images/Like-icon.png" style="width: 16px;height: 16px;">
                    <span>{{article.likenumber}}</span>
                  </span>
                  </div>
                  <div class="content-text">
                    <p>{{article.abstracts}}</p>
                    <p><el-image :fit="'fill'" :src="article.coverurl"/></p>
                  </div>
                </div>
              </div>
              <template #footer>
                <div class="card-footer">
                  <span>
                  <el-button type="success" round @click="getDetails(article)" size="large">查看原文</el-button>
                </span>
                </div>
              </template>
            </el-card>
          </el-col>
        </el-row>

<!--              <el-row style="margin-bottom: 10px;">-->
<!--                <el-col :span="24">-->
<!--                  <el-card shadow="hover">-->
<!--                    <template #header>-->
<!--                      <div class="card-header">-->
<!--                        <span style="align-content: center">Card Title</span>-->
<!--                      </div>-->
<!--                    </template>-->
<!--                    <div>-->

<!--        &lt;!&ndash;              <div class="info">&ndash;&gt;-->
<!--        &lt;!&ndash;                <span>&ndash;&gt;-->
<!--        &lt;!&ndash;                  <el-avatar&ndash;&gt;-->
<!--        &lt;!&ndash;                      src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"&ndash;&gt;-->
<!--        &lt;!&ndash;                  />&ndash;&gt;-->
<!--        &lt;!&ndash;                </span>&ndash;&gt;-->
<!--        &lt;!&ndash;                <span>&ndash;&gt;-->
<!--        &lt;!&ndash;                  UserName&ndash;&gt;-->
<!--        &lt;!&ndash;                </span>&ndash;&gt;-->
<!--        &lt;!&ndash;              </div>&ndash;&gt;-->

<!--                      &lt;!&ndash;              卡片左上角标签&ndash;&gt;-->
<!--                      <div class="ribbon">-->
<!--                        <span>随心所写</span>-->
<!--                      </div>-->

<!--                      <div class="content">-->
<!--                        <div class="content-info">-->
<!--                          <span style="display:flex;align-items: center;">-->
<!--                            <el-icon><Calendar /></el-icon>-->
<!--                            <span>2024-05-08</span>-->
<!--                          </span>-->
<!--                          <span style="display:flex;align-items: center;">-->
<!--                            <el-icon><View /></el-icon>-->
<!--                            <span>100</span>-->
<!--                          </span>-->
<!--                        </div>-->
<!--                        <div class="content-text">-->
<!--                          <p>Aimer ce n'est pas se regarder l'un l'autre mais regarder ensemble dans la meme direction.-->
<!--                          </p>-->
<!--                          <p>爱不是相互凝望,而是朝同一个方向看去。</p>-->
<!--                          <p><el-image :fit="'fill'" src="https://img1.baidu.com/it/u=1832620790,2486462626&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800"/></p>-->
<!--                        </div>-->
<!--                      </div>-->
<!--                    </div>-->
<!--                    <template #footer>-->
<!--                      <div class="card-footer">-->
<!--                        &lt;!&ndash;                <span>Footer content</span>&ndash;&gt;-->
<!--                        <span>-->
<!--                          <el-button type="success" round>查看原文</el-button>-->
<!--                        </span>-->
<!--                        <span>-->
<!--&lt;!&ndash;                          <el-button type="primary" round><el-icon><CaretTop /></el-icon>点赞</el-button>&ndash;&gt;-->
<!--&lt;!&ndash;                          <el-button type="warning" round><el-icon><Star /></el-icon>收藏</el-button>&ndash;&gt;-->
<!--                        </span>-->
<!--                      </div>-->
<!--                    </template>-->
<!--                  </el-card>-->
<!--                </el-col>-->
<!--              </el-row>-->


<!--分页区域-->
      <el-row style="margin-bottom: 10px;">
        <el-col :span="24">
          <el-card>
            <div style="display: flex;justify-content: center;">
              <el-pagination background layout="prev, pager, next,jumper"
                             v-model:page-size="pageSize"
                             v-model:current-page="pageNum"
                             :total="total"
                             @size-change="onSizeChange"
                             @current-change="onCurrentChange"
              />
            </div>
          </el-card>

        </el-col>
      </el-row>
    </el-main>

    <el-aside width="20%">
<!--      <el-row style="margin-top: 20px;">-->
<!--        <el-col :span="24">-->
<!--          <el-card shadow="hover">-->
<!--            <template #header>-->
<!--              <div style="display: flex;justify-content: center;">-->
<!--                <el-image-->
<!--                    src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"-->
<!--                    :fit="'fill'"-->
<!--                />-->
<!--              </div>-->
<!--            </template>-->
<!--            <span>UserName</span>-->
<!--          </el-card>-->
<!--        </el-col>-->
<!--      </el-row>-->
    </el-aside>
  </el-container>
</template>

<script setup>

import Image from '../components/index.vue'

import {useRouter} from "vue-router"
import {articleListService} from '../api/Article.js'
import {ref} from "vue";

const router = useRouter()

const getDetails = (item) => {
  router.push({name:'articledetails',params:{id:item.id}})

}

//用户搜索时选中的分类id
const categoryId = ref(null)

//分页条数据模型
const pageNum = ref(1)   //当前页
const total = ref(0)            //总条数
const pageSize = ref(5)  //每页条数
//用户搜索时选中的发布状态
const status = ref(1)

const list = ref()

const isEmpty = ref(true)

//当每页条数发生了变化，调用此函数
const onSizeChange = (size) => {
  pageSize.value = size
  getArticleList()
}
//当前页码发生变化，调用此函数
const onCurrentChange = (num) => {
  pageNum.value = num
  getArticleList()
}

//日期格式转换
const formatDate = (dateString) => {
  const date = new Date(dateString);
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以加1
  const day = String(date.getDate()).padStart(2, '0');
  return `${year}-${month}-${day}`;
}


//获取文章列表数据
const getArticleList = async () => {
  let params = {
    pageNum: pageNum.value,
    pageSize: pageSize.value,
    categoryId: categoryId.value ? categoryId.value : null,
    status: status.value ? status.value : null
  }
  try {
    let result = await articleListService(params);
    list.value = result.data.items;
    total.value = result.data.total;
    if(total.value>0)isEmpty.value = false
  } catch (error) {
    console.error('Error fetching article list:', error);
  }
}

getArticleList()







</script>

<style scoped>
/*.main {*/
/*  !*margin: 0;*!*/
/*  !*display: flex;*!*/
/*  !*place-items: center;*!*/
/*  !*min-width: 320px;*!*/
/*  !*min-height: 100vh;*!*/
/*  background-image: url("src/assets/images/BackgroundImg.png");*/
/*}*/

.card-header{
  display: flex;
  /*align-content: center;*/
  justify-content: center;
}
.card-footer{
  display: flex;
  align-content: center;
  justify-content: space-between;
}
.info{
  display: flex;
  align-items: center;
}
.content-info{
  display: flex;
  justify-content: space-between;
  /*justify-content: center;*/
  align-items: center;
}

/* HTML: <div class="ribbon">Your text content</div> */
.ribbon {
  font-size: 25px;
  font-weight: bold;
  color: #fff;
}

.ribbon {
  --r: .4em; /* control the ribbon shape (the radius) */
  --c: #FA6900;

  position: absolute;
  top: 20px;
  left: calc(-1*var(--r));
  line-height: 1.8;
  padding: 0 .5em calc(2*var(--r));
  border-radius: var(--r) 0 0 var(--r);
  background:
      radial-gradient(100% 50% at left,var(--c) 98%,#0000 101%)
      100% 0/.5lh calc(100% - 2*var(--r)),
      radial-gradient(100% 50% at right,#0005 98%,#0000 101%)
      0 100%/var(--r) calc(2*var(--r)),
      conic-gradient(from 90deg at var(--r) calc(100% - 2*var(--r)),#0000 25%,var(--c) 0)
      0 0/calc(101% - .5lh) 100%;
  background-repeat: no-repeat;
}
</style>